<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ include file="include.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta content="de" http-equiv="Content-Language">
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	<title>fotoDB</title>
	<script>
	function init(){
		var iframe=parent.window.document.getElementById('bodyFrame');
		if (iframe!=null){
			iframe.setAttribute('height',getComputedStyle(document.body.parentNode).height);
		}
	}
	function init2(){
		var resultFrame=this.parent.window.document.getElementById('resultFrame');
		resultFrame.setAttribute('height',getComputedStyle(document.body.parentNode).height);
	}
	</script>
</head>
<body onload="init();init2()">
	<div id="content" style="text-align:left;width:100%;">
		<div id="img" style="text-align:center;">
			<a href="<%=dbmode%>ImgShowApp?type=full_image&bnr=<c:out value="${imgInfo.nr}"/>">
			<img src="<%=dbmode%>ImgShowApp?type=middle_image&bnr=<c:out value="${imgInfo.nr}"/>" title="Click to Fullsize" alt="Click to Fullsize">
			</a>
		</div>
		
		<div id="img_info_table">
			<div class="img_info_table_cell" style="height:10px;">Name:</div>
			<div class="img_info_table_cell" style="font-size:20px;font-weight:bold;color:#000;">
				<c:out value="${imgInfo.name}" />
			</div>
			<div class="img_info_table_cell" style="height:10px;">Bewertung:</div>
			<div class="img_info_table_cell" >
				<ul class="star-rating">
				<li class="current-rating" style="width:<c:out value="${imgInfo.rate * 30}"/>px" />
				<li><a title="1 star out of 5" class="one-star">1</a></li>
				<li><a title="2 stars out of 5" class="two-stars">2</a></li>
				<li><a title="3 stars out of 5" class="three-stars">3</a></li>
				<li><a title="4 stars out of 5" class="four-stars">4</a></li>
				<li><a title="5 stars out of 5" class="five-stars">5</a></li>
				</ul> 
			</div>
			<div class="img_info_table_cell" style="height:10px;">Kategorie:</div>
			<div class="img_info_table_cell">
				<c:forEach var="category" items="${imgInfo.categories}">
					<a href="<%=dbmode%>SearchApp?searchFor=thumbs&in=category&ktnr=<c:out value="${category.nr}"/>&name=<c:out value="${category.name}"/>" 
							style="margin-right:10px;">
						<c:out value="${category.name}"/>
					</a>
				</c:forEach>
			</div>
			<div class="img_info_table_cell" style="height:10px;">Schlagworte:</div>
			<div class="img_info_table_cell">
				<c:forEach var="keyword" items="${imgInfo.keywords}">
					<a href="<%=dbmode%>SearchApp?searchFor=thumbs&in=keyword&kwnr=<c:out value="${keyword.nr}"/>&word=<c:out value="${keyword.word}"/>" 
						style="margin-right:10px;">
						<c:out value="${keyword.word}"/>
					</a>
				</c:forEach>
			</div>

			<div class="img_button_cell">
			<form method="post" name="img_form" action="">
				<div class="buttons" style="text-align:center;">
					<button style="width:100%;" class="regular" name="updateImgButton"
							onClick="editImage(<c:out value="${imgInfo.nr}"/>);">
        				Bearbeiten
    				</button>
				</div>
				<p>
				<div class="buttons" style="text-align:center;">
					<button style="width:100%;" class="negative" name="deleteImgButton" 
							onClick="deleteImage(<c:out value="${imgInfo.nr}"/>);"> 
        				Löschen
    				</button>
				</div>
			</form>
			</div>
		</div>
		
		<div class="img_exif">
			<div class="exif_cell">Image Width: <c:out value="${imgInfo.exif.imgWidth}" /></div>
			<div class="exif_cell">Image Height: <c:out value="${imgInfo.exif.imgHeight}" /></div>
			<div class="exif_cell">exposure Time: <c:out value="${imgInfo.exif.exposureTime}" /></div>
			<div class="exif_cell">F-Number: <c:out value="${imgInfo.exif.fnumber}" /></div>
			<div class="exif_cell">exposure Program: <c:out value="${imgInfo.exif.exposureProgram}" /></div>
			<div class="exif_cell">Time Digitized: <c:out value="${imgInfo.exif.timeDigitized}" /></div>
			<div class="exif_cell">Time Original: <c:out value="${imgInfo.exif.timeOriginal}" /></div>
			<div class="exif_cell">Color Space: <c:out value="${imgInfo.exif.colorSpace}" /></div>
			<div class="exif_cell">Exif Img Width: <c:out value="${imgInfo.exif.exifImgWidth}" /></div>
			<div class="exif_cell">Exif Img Height: <c:out value="${imgInfo.exif.exifImgHeight}" /></div>
			<div class="exif_cell">exposure Mode: <c:out value="${imgInfo.exif.exposureMode}" /></div>
			<div class="exif_cell">Make: <c:out value="${imgInfo.exif.make}" /></div>
			<div class="exif_cell">Model: <c:out value="${imgInfo.exif.model}" /></div>
			<div class="exif_cell">Orietation: <c:out value="${imgInfo.exif.orietation}" /></div>		
			<div class="exif_cell">X Resolution: <c:out value="${imgInfo.exif.XResolution}" /></div>
			<div class="exif_cell">Y Resolution: <c:out value="${imgInfo.exif.YResolution}" /></div>
		</div>
	</div>
	<input id="dbmode" type="text" value="<%=dbmode%>" style="display:none"/>
</body>

<script>

	function editImage(nr) {
		var dbmode=document.getElementById('dbmode').value;
		document.img_form.action=dbmode+'ImgInfoApp?action=editImage&bnr=' + nr;
		document.img_form.submit();
	}
		
	function deleteImage(nr) {
		var dbmode=document.getElementById('dbmode').value;
		if(confirm("löschen das Bild?")) {
			document.img_form.action=dbmode+'ImgUpdateApp?action=deleteImage&bnr=' + nr;
			document.img_form.submit();
	}
}
</script>
</html>
